import { Modal, DatePicker, message } from 'antd';
import { useEffect, useState } from 'react';
import type { Dayjs } from 'dayjs';
import 'dayjs/locale/zh-cn';
import '../styles/know-gov.scss';
const { RangePicker } = DatePicker;

interface ExportModalProps {
  open: boolean;
  onCancel: () => void;
  onOk: (startTime: string, endTime: string) => void;
  title?: string;
  loading?: boolean
}

const ExportModal: React.FC<ExportModalProps> = ({
  open,
  onCancel,
  onOk,
  title = '导出数据',
  loading = false
}) => {
  const [dateRange, setDateRange] = useState<[Dayjs | null, Dayjs | null]>([null, null]);

  const handleOk = () => {
    onCancel && onCancel();
    if (dateRange[0] && dateRange[1]) {
      onOk(
        dateRange[0].format('YYYY-MM-DD'),
        dateRange[1].format('YYYY-MM-DD')
      );
    } else {
      // 当未选择日期范围时，导出所有未知问
      Modal.confirm({
        title: '确认导出',
        content: '未选择日期范围，确定导出所有未知问题吗？',
        okText: '确定',
        cancelText: '取消',
        cancelButtonProps: {
          className: 'custom-cancel-button'
        },
        okButtonProps: {
          style: {
            backgroundColor: '#6640FF',
            borderColor: '#6640FF'
          }
        },
        onOk: async () => {
          onOk('', '');
        },
        onCancel: () => {
          onCancel && onCancel();
        },
      });
    };
  };

  useEffect(() => {
    if (!open) {
      setDateRange([null, null]);
    }
  }, [open]);

  return (
    <Modal
      title={title}
      open={open}
      onCancel={onCancel}
      onOk={handleOk}
      destroyOnClose
      okButtonProps={{
        // disabled: !dateRange[0] || !dateRange[1],
        loading: loading
      }}
    >
      <div className="py-4">
        <div className="mb-2">请选择对话生成的时间范围：</div>
        <RangePicker
          className="w-full"
          onChange={(dates) => {
            if (dates) {
              setDateRange(dates as [Dayjs | null, Dayjs | null]);
            } else {
              setDateRange([null, null]);
            }
          }}
        />
      </div>
    </Modal>
  );
};

export default ExportModal; 